<template>
  <div class="custom-navbar">
    <el-row type="flex" justify="space-between" align="middle" class="navbar-row">
      <!-- Logo区域 - 最左侧 -->
      <el-col :span="4">
        <div class="logo-container">
          <el-avatar :size="50" :src="logoUrl" class="logo"/>
        </div>
      </el-col>

      <!-- 导航菜单 - 最右侧 -->
      <el-col :span="20">
        <div class="menu-container">
          <el-menu
              mode="horizontal"
              class="horizontal-menu"
              background-color="transparent"
              text-color="#333333"
              active-text-color="#096DD9"
              :ellipsis="false"
              :default-active="activeIndex"
              @select="handleMenuSelect"
          >
            <!-- 健康 -->
            <el-menu-item index="1" @click="handleItemClick('1', 'bodyData')">
              <el-icon>
                <Monitor/>
              </el-icon>
              <span>健康</span>
            </el-menu-item>

            <!-- 服务 -->
            <el-sub-menu
                index="2"
                @click="handleParentClick('2', '服务')"
                :class="{ 'is-active': activeIndex === '2' }"
            >
              <template #title>
                <el-icon>
                  <Service/>
                </el-icon>
                <span>服务</span>
              </template>
              <el-menu-item index="2-1" @click="handleItemClick('2-1', '挂号')">
                <el-icon>
                  <Calendar/>
                </el-icon>
                <span>挂号</span>
              </el-menu-item>
              <el-menu-item index="2-2" @click="handleItemClick('2-2', '问诊')">
                <el-icon>
                  <ChatDotRound/>
                </el-icon>
                <span>问诊</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 发现 -->
            <el-sub-menu
                index="3"
                @click="handleParentClick('3', 'discover')"
                :class="{ 'is-active': activeIndex === '3' }"
            >
              <template #title>
                <el-icon>
                  <Search/>
                </el-icon>
                <span>发现</span>
              </template>
              <el-menu-item index="3-1" @click="handleItemClick('3-1', 'noticeClient')">
                <el-icon>
                  <Promotion/>
                </el-icon>
                <span>公告</span>
              </el-menu-item>
              <el-menu-item index="3-2" @click="handleItemClick('3-2', 'information')">
                <el-icon>
                  <Reading/>
                </el-icon>
                <span>资讯</span>
              </el-menu-item>
              <el-menu-item index="3-3" @click="handleItemClick('3-3', 'information/publish')">
                <el-icon>
                  <EditPen/>
                </el-icon>
                <span>发布资讯</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 商城 -->
            <el-sub-menu
                index="4"
                @click="handleParentClick('4', '商城')"
                :class="{ 'is-active': activeIndex === '4' }"
            >
              <template #title>
                <el-icon>
                  <ShoppingCart/>
                </el-icon>
                <span>商城</span>
              </template>
              <el-menu-item index="4-1" @click="handleItemClick('4-1', '严选好物')">
                <el-icon>
                  <Star/>
                </el-icon>
                <span>严选好物</span>
              </el-menu-item>
              <el-menu-item index="4-2" @click="handleItemClick('4-2', '新品专区')">
                <el-icon>
                  <Opportunity/>
                </el-icon>
                <span>新品专区</span>
              </el-menu-item>
              <el-menu-item index="4-3" @click="handleItemClick('4-3', '运动健身')">
                <el-icon>
                  <Basketball/>
                </el-icon>
                <span>运动健身</span>
              </el-menu-item>
              <el-menu-item index="4-4" @click="handleItemClick('4-4', '全部分类')">
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>全部分类</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 我的 -->
            <el-sub-menu
                index="5"
                @click="handleEdit"
                :class="{ 'is-active': activeIndex === '5' }"
            >
              <template #title>
                <div class="user-info-trigger">
                  <el-avatar
                      :size="44"
                      :src="userStore.avatar"
                      class="user-avatar"
                  />
                  <span class="username">{{ userStore.nickName }}</span>
                </div>
              </template>
              <el-menu-item index="5-1" @click="handleItemClick('user-sport', 'sportAndHealth')">
                <el-icon>
                  <Basketball/>
                </el-icon>
                <span>运动与健康</span>
              </el-menu-item>

              <el-menu-item index="5-2" @click="handleItemClick('user-shop', '商城相关')">
                <el-icon>
                  <ShoppingCart/>
                </el-icon>
                <span>商城相关</span>
              </el-menu-item>

              <el-menu-item index="5-3" @click="handleItemClick('user-device', '我的设备')">
                <el-icon>
                  <Monitor/>
                </el-icon>
                <span>我的设备</span>
              </el-menu-item>

              <el-menu-item index="5-4" @click="handleItemClick('user-other', '')">
                <el-icon>
                  <More/>
                </el-icon>
                <span>其他</span>
              </el-menu-item>

              <el-menu-item index="5-5" @click="logout">
                <el-icon>
                  <SwitchButton/>
                </el-icon>
                <span>退出账号</span>
              </el-menu-item>

            </el-sub-menu>

          </el-menu>
        </div>
      </el-col>
    </el-row>

    <userDetail ref="userDetailRef"/>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {
  Monitor,
  Service,
  Calendar,
  ChatDotRound,
  Search,
  Promotion,
  Reading,
  EditPen,
  ShoppingCart,
  Star,
  Opportunity,
  Basketball,
  Menu,
  More,
  SwitchButton
} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import logoImg from '@/assets/logo/logo.png'
import useUserStore from "@/store/modules/user.js";
import {useRouter} from "vue-router";
import userDetail from "@/components/TopNav/userDetail.vue"
const router = useRouter()
const userStore = useUserStore()
const logoUrl = ref(logoImg)
const activeIndex = ref('1')

// 菜单选择处理
const handleMenuSelect = (index) => {
  activeIndex.value = index
}

// 处理父菜单点击
const handleParentClick = (index, menuPath) => {
  console.log(`${menuPath} 被点击，索引: ${index}`)
  activeIndex.value = index
  router.push({path: menuPath})
}

// 处理子菜单项点击
const handleItemClick = (index, menuPath) => {
  console.log(`${menuPath} 被点击，索引: ${index}`)
  router.push({path: menuPath})
}
const logout = () => {
  ElMessageBox.confirm('确定要退出账号吗?', '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index'
    })
  })
}
const userDetailRef = ref()
// 编辑用户
const handleEdit = () => {
  userDetailRef.value.openDialog(userStore.id)
}
</script>

<style scoped>
.custom-navbar {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 50%, #d9e8ff 100%);
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 1px 3px rgba(9, 109, 217, 0.1);
  border-bottom: 1px solid rgba(9, 109, 217, 0.1);
}

.navbar-row {
  height: 100%;
  width: 100%;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(9, 109, 217, 0.2);
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}

.horizontal-menu {
  border: none;
  height: 60px;
  background: transparent;
  display: flex;
  align-items: center;
}

.horizontal-menu :deep(.el-sub-menu__title),
.horizontal-menu :deep(.el-menu-item) {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.horizontal-menu :deep(.el-sub-menu__title:hover),
.horizontal-menu :deep(.el-menu-item:hover) {
  background-color: rgba(9, 109, 217, 0.08);
  border-bottom-color: #096DD9;
  color: #096DD9;
}

.horizontal-menu :deep(.el-menu-item.is-active) {
  border-bottom-color: #096DD9;
  background-color: rgba(9, 109, 217, 0.12);
  color: #096DD9;
}

.horizontal-menu :deep(.el-sub-menu.is-active .el-sub-menu__title) {
  color: #096DD9 !important;
  border-bottom-color: #096DD9 !important;
  background-color: rgba(9, 109, 217, 0.12) !important;
}

.user-info-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}


.user-avatar {
  border: 2px solid transparent;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.user-avatar:hover {
  border-color: #096DD9;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
}

:deep(.el-sub-menu .el-menu) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(9, 109, 217, 0.15);
  border: 1px solid rgba(9, 109, 217, 0.1);
}

:deep(.el-menu-item) {
  font-weight: 400;
  min-width: 120px;
  color: #333333;
}

:deep(.el-menu-item:hover) {
  color: #096DD9;
  background-color: rgba(9, 109, 217, 0.06);
}

:deep(.el-menu-item.is-active) {
  color: #096DD9;
  background-color: rgba(9, 109, 217, 0.08);
}

:deep(.el-icon) {
  color: inherit;
}

:deep(.user-menu-popper) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(9, 109, 217, 0.15);
}

:deep(.user-menu-popper .el-menu) {
  border: none;
  border-radius: 8px;
}

:deep(.user-sub-menu .el-sub-menu__title) {
  padding: 0 !important;
  border-bottom: none !important;
}

:deep(.user-sub-menu .el-sub-menu__title:hover) {
  background-color: transparent !important;
}

:deep(.user-sub-menu:hover .user-info-trigger) {
  background-color: rgba(9, 109, 217, 0.08);
  border-radius: 8px;
}
</style>